<!--Vue 组件，用于提供搜索和一些操作按钮的功能。
该组件的功能包括关键字搜索、下拉选项搜索、云主机搜索、云硬盘搜索、容器搜索等等。-->
<template>
  <div @keyup.enter="onSearch">
    <el-row>
      <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
        <div v-if="basicFacility" />
        <div v-else class="div-show-total base">
          {{ $t("now_have") }} <span class="font-bold">{{ itemNumber }}</span>
          {{ itemName }}
          <!-- <ingress v-if="domain"> ({{ 'Ingress'+$t('service')+$t('port') }}: {{ ingNodePort }})</ingress> -->
        </div>
      </el-col>
      <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
        <div class="div-operation">
          <el-button
            v-if="search"
            type="primary"
            class="btn-next-to"
            icon="el-icon-search"
            @click="
              hidePanel = !hidePanel;
              showCreate = false;
            "
            >{{ $t("search") }}</el-button
          >
          <el-button
            v-if="create || createProf"
            type="primary"
            class="btn-next-to"
            icon="el-icon-circle-plus-outline"
            @click="confirmCreate"
            >{{ $t("new") }}</el-button
          >
        </div>
      </el-col>
    </el-row>
    <el-row>
      <!--      搜索-->
      <div v-if="hidePanel" class="search-form">
        <el-form label-width="80px" @submit.native.prevent>
          <!--          关键字搜索-->
          <el-form-item :label="$t('keyword')">
            <el-input
              v-model="searchVal"
              :placeholder="$t('Search_tool_by_name_description')"
              clearable
            />
          </el-form-item>
          <el-row type="flex" justify="right" style="margin-right: 40px">
            <el-form-item>
              <el-button type="primary" @click="onSearch">{{
                $t("search")
              }}</el-button>
              <el-button @click="onClear()">{{ $t("clear") }}</el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </div>
      <!--  新建  -->
      <div v-if="showCreate && createProf" class="search-form">
        <el-form label-width="80px" @submit.native.prevent>
          <el-row>
            <el-form-item v-if="createProf" :label="$t('key')">
              <el-input
                v-if="createProf"
                v-model="profVal.key"
                style="width: auto"
              />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item v-if="createProf" :label="$t('value')">
              <el-input
                v-if="createProf"
                v-model="profVal.value"
                style="width: auto"
              />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item v-if="createProf" :label="$t('description')">
              <el-input v-model="profVal.description" style="width: auto" />
            </el-form-item>
          </el-row>
          <el-row style="margin-right: 40px">
            <el-form-item>
              <el-button type="primary" @click="onCreate">{{
                $t("new")
              }}</el-button>
              <el-button @click="onClear()">{{ $t("clear") }}</el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    itemNumber: Number,
    itemName: String,
    search: Boolean,
    create: Boolean,
    createProf: Boolean,
    basicFacility: Boolean,
    placeholder: {
      default: "通过工具的名称和描述搜索",
    },
  },
  data() {
    return {
      hidePanel: false,
      showCreate: false,
      searchVal: "",
      profVal: {
        key: "",
        value: "",
        searchKey: "",
      },
    };
  },
  // emits: ['on-search', 'on-create', 'on-label', 'on-storage_class', 'on-template-center', 'on-import', 'on-image-center', 'on-alertmanager', 'on-config'],
  emits: ["on-search", "on-create", "on-config"],
  methods: {
    // onSearch 方法用于提交搜索，它会根据不同的搜索类型，向父组件发送不同的参数。
    onSearch() {
      this.$emit("on-search", this.searchVal);
    },
    // onCreate 方法用于提交新建,它会根据不同的新建类型发送不同的参数
    onCreate() {
      // 先隐藏面板
      this.hidePanel = false;
      if (this.createProf) {
        const newProfile = {
          description: this.profVal.description,
        };
        // 发出创建事件，通知父组件执行创建操作
        this.$emit("on-create", newProfile);
        // 清空输入，准备下一次创建
        this.onClear();
      }
      // 切换创建面板的显示状态
      this.showCreate = !this.showCreate;
    },
    confirmCreate() {
      this.hidePanel = false;
      this.showCreate = !this.showCreate;
      if (this.create) {
        this.$emit("on-create");
      }
    },
    // onClear 方法用于清除搜索条件或新建条目的内容，它会重置所有的搜索条件或新建条目的内容。
    onClear() {
      this.searchVal = "";
      this.profVal.key = "";
      this.profVal.value = "";
      this.profVal.description = "";
    },
    // disableVisible 方法用于在用户按下回车键时，隐藏下拉框。
    disableVisible() {
      this.$refs.selectBox.visible = false;
    },
  },
};
</script>

<style scoped>
/deep/ .el-checkbox-button__inner {
  border-left: 1px solid #dcdfe6;
  border-radius: 4px !important;
}

.search-form {
  background-color: white;
  padding: 23px 0 0.1px 0;
  margin-bottom: 15px;
}
.font-bold {
  font-weight: bold;
}
.div-operation {
  float: right;
  margin-top: 0;
  margin-bottom: 10px;
}
.div-show-total {
  margin-top: 15px;
  margin-bottom: 10px;
  font-size: 14px;
}
.el-input {
  padding-right: 30px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
